<template>
  <article>

    <el-upload 
    class="avatar-uploader" 
    accept="image/png, image/jpeg, image/jpg"
    :show-file-list="false" 
    :on-success="handleAvatarSuccess"
    :on-change="onChange1"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl1" :src="imageUrl1" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>

  <el-progress v-show="compare_1v1_score" type="dashboard" :percentage="compare_1v1_score" :color="colors" />
  
  <el-upload 
    class="avatar-uploader" 
    accept="image/png, image/jpeg, image/jpg"
    :show-file-list="false" 
    :on-success="handleAvatarSuccess"
    :on-change="onChange2"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl2" :src="imageUrl2" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>

  </article>

  

  
</template>

<script setup>
import { ref, watch} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios';

let base_url = "http://10.82.14.162:8000/face/"


const imageUrl1 = ref('')
const imageUrl2 = ref('')
const imageFile1 = ref()
const imageFile2 = ref()
const compare_1v1_score =ref()

watch(()=>{
  if(imageUrl1.value && imageUrl2.value){
    print('watech!!!')
    var data = new FormData();
    data.append('img1', imageFile1.value)
    data.append('img2', imageFile2.value)
    data.append("method", "compare_1v1")

    const headers = Object.assign(({}), {})
    headers['Content-Type'] = `multipart/form-data; boundary=${data._boundary}`

    axios.post(base_url, data, { headers: headers }).then(resp => {
      compare_1v1_score.value = resp.data.score*100
      console.log("success: ", resp)
    }).catch(error => {
      console.log(error)
    })
  }
})

const onChange1 = (uploadFile)=>{
  imageFile1.value = uploadFile.raw
  imageUrl1.value = URL.createObjectURL(uploadFile.raw)
}

const onChange2 = (uploadFile)=>{
  imageFile2.value = uploadFile.raw
  imageUrl2.value = URL.createObjectURL(uploadFile.raw)
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style>
article{

}
.avatar-uploader {
  display: inline-flex;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  float: left;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload .el-upload__input {
  display: none;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
